<template lang="html">
  <div class="view">
      <div class="echarts_view_1" v-loading="loading1">
          <div class="filter_view">
              <div class="tabs_view">维修数量</div>
              <div class="f_view">
                <span>统计时间：{{statisTime}}</span>
                <datePicker startEndTime @onFilter="onFilter" />
              </div>
          </div>

          <div class="content">
              <div class="e_chart_wrap" >
                <div class="e_chart" ref="echarts"></div>
                <i class="el-icon-more" @click="navigateTo(1)"></i>
              </div>
              <div class="ranks">
                  <div class="rank_t">
                      <span>维修数量排行</span>
                      <div class="rank_face">
                        <img src="../../assets/img/down.png" />
                        <i class="el-icon-more" @click="navigateTo(2)"></i>
                      </div>
                  </div>

                  <div class="rank_list">
                      <div class="rank_item" v-for="(item,index) in ranks" :key="index">
                          <div class="name">
                              <div :class='[index<3?"number radius_num":"number"]'>{{index+1}}</div>
                              <span>{{item.realName}}</span>
                          </div>
                          <div class="price">{{item.repairCount}}</div>
                      </div>
                  </div>

              </div>
          </div>
      </div>
      <div class="echarts_view_1" v-loading="loading2">
        <div class="filter_view">
            <div class="tabs_view">维修类型</div>
            <div class="f_view">
              <span>统计时间：{{statisTime1}}</span>
              <datePicker startEndTime @onFilter="onFilter1" />
            </div>
        </div>

        <div class="content">
            <div class="e_chart_wrap2" ref="echarts2"></div>
            <div class="el_table">
              <el-table :data="tableData" show-summary :summary-method="getSummaries" :header-cell-style="{color:'#333',background:'#E8E8E8'}" border>
                <el-table-column align="center" prop="typeName" label="产品类型"></el-table-column>
                <el-table-column align="center" prop="afterSalaCount" label="维修件数"></el-table-column>
                <el-table-column align="center" prop="typeRatio" label="占比">
                  <template slot-scope="scope">
                    <span>{{scope.row.typeRatio + '%'}}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="newRepairCount" label="新货维修"></el-table-column>
                <el-table-column align="center" prop="newRepairRatio" label="占比">
                  <template slot-scope="scope">
                    <span>{{scope.row.newRepairRatio + '%'}}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="changeCount" label="改寸服务"></el-table-column>
                <el-table-column align="center" prop="changeRatio" label="占比">
                  <template slot-scope="scope">
                    <span>{{scope.row.changeRatio + '%'}}</span>
                  </template>
                </el-table-column>
                <el-table-column align="center" prop="qualityCount" label="质量问题"></el-table-column>
                <el-table-column align="center" prop="qualityRatio" label="占比">
                  <template slot-scope="scope">
                    <span>{{scope.row.qualityRatio + '%'}}</span>
                  </template>
                </el-table-column>
              </el-table>
            </div>
        </div>

      </div>

  </div>
</template>

<script>
export default {
  data(){
    return {
      loading1: false,
      loading2: false,
      statisTime: '',
      statisTime1: '',
      year: '',
      month: '',
      day: '',
      year1: '',
      month1: '',
      day1: '',
      date: [],
      date2: [],
      tableData:[],
      ranks: [],
      echratsOptions: {
        title: {text: '维修数量走势', textStyle: {fontSize:14,fontWeight:'normal'},left:"center"},
        xAxis: {
            type: 'category',
            boundaryGap: false,
            data: []
        },
        toolbox:{feature:{saveAsImage: {title:'下载'}},right:80},
        tooltip: {
            trigger: 'axis'
        },
        yAxis: {
            type: 'value'
        },
        series: [{
            data: [],
            type: 'line',
            itemStyle:{color:'#4196FF'},
            lineStyle:{color:'#4196FF'},
            areaStyle: {
                color:{
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [{
                        offset: 0, color: '#95C7FF'
                    }, {
                        offset: 1, color: '#fff'
                    }],
                }
            }
        }]
      },
      echratsOptions2:{
        title: {text: '维修类型占比', textStyle: {fontSize:14,fontWeight:'normal'}},
        tooltip: {
            trigger: 'item',
            formatter: '{b}: {c}'
        },
        legend: {
          bottom: 0,
          left: 'center',
          data: []
        },
        series: [
            {
                type: 'pie',
                radius: ['50%', '70%'],
                center: ['50%', '50%'],
                label: {
                  normal: {show:false}
                },
                data: []
            }
        ]
      },

    }
  },
  async created(){
    await this.lineChart();
    await this.pieChart();
  },
  methods:{
    async lineChart(){
      this.loading1 = true;
      let res = await this.$http.selectDataStatsRepair({
        startTime: (this.date&&this.date[0]) || '',
        endTime: (this.date&&this.date[1]) || '',
        dayTime: this.day,
        monthTime: this.month,
        yearTime: this.year,
      })
      this.loading1 = false;
      if(res.data.code == 0){
        this.echratsOptions.xAxis.data = [];
        this.echratsOptions.series[0].data = [];
        res.data.data.dataStatsRepair.forEach(item=>{
          this.echratsOptions.xAxis.data.push(item.afterSalaTime);
          this.echratsOptions.series[0].data.push(item.repairCount);
        });
        this.ranks = res.data.data.ataStatsRepairDesigner;
        this.initEcharts();
      }
    },

    async pieChart(){
      this.loading2 = true;
      let res = await this.$http.selectDataStatsRepairPie({
        startTime: (this.date2&&this.date2[0]) || '',
        endTime: (this.date2&&this.date2[1]) || '',
        dayTime: this.day1,
        monthTime: this.month1,
        yearTime: this.year1,
      })
      this.loading2 = false;
      if(res.data.code == 0){
        this.echratsOptions2.legend.data = [];
        this.echratsOptions2.series[0].data = [];
        res.data.data.dataStatsRepairPie.forEach(item=>{
          this.echratsOptions2.legend.data.push(item.typeName);
          this.echratsOptions2.series[0].data.push({
            value:item.afterSalaCount,
            name: item.typeName
          });
        });
        this.tableData = res.data.data.dataStatsRepairPieDetail;
        this.initEcharts();
      }
    },

    onFilter(e){
      this.statisTime = e.val;
      this.date = [];
      this.year = '';
      this.month = '';
      this.day = '';
      switch (e.key) {
        case 1: this.day = e.val; break;
        case 2: this.month = e.val; break;
        case 3: this.year = e.val; break;
        case 4:
          this.date = [...e.val];
          if(e.val[0]) this.statisTime = `${e.val[0]} - ${e.val[1]}`;
          else this.statisTime = '';
        break;
      }
      this.lineChart()
    },
    onFilter1(e){
      this.statisTime1 = e.val;
      this.date2 = [];
      this.year1 = '';
      this.month1 = '';
      this.day1 = '';
      switch (e.key) {
        case 1: this.day1 = e.val; break;
        case 2: this.month1 = e.val; break;
        case 3: this.year1 = e.val; break;
        case 4:
          this.date2 = [...e.val];
          if(e.val[0]) this.statisTime1 = `${e.val[0]} - ${e.val[1]}`;
          else this.statisTime1 = '';
        break;
      }
      this.pieChart()
    },

    getSummaries(param){
        const { columns, data } = param;
        const sums = [];
        columns.forEach((column, index) => {
          if (index === 0) {
            sums[index] = '合计';
            return;
          }else if(index%2 == 1){
            const values = data.map(item => Number(item[column.property]));
            if (!values.every(value => isNaN(value))) {
              sums[index] = values.reduce((prev, curr) => {
                const value = Number(curr);
                if (!isNaN(value)) {
                  return prev + curr;
                } else {
                  return prev;
                }
              }, 0);
            }
          }
        })

        return sums;
    },

    initEcharts(){
      var echarts = this.$chart.init(this.$refs['echarts']);
      var echarts2 = this.$chart.init(this.$refs['echarts2']);
      echarts.clear();
      echarts2.clear();
      echarts.setOption(this.echratsOptions,true);
      echarts2.setOption(this.echratsOptions2,true);
    },

    navigateTo(n){
      switch (n) {
        case 1:
          this.$router.push('/statistics/maintain_statistics/maintain_num');
          break;
        case 2:
          this.$router.push('/statistics/maintain_statistics/maintain_designer_rank');
          break;

      }
    },

  }
}
</script>

<style lang="css" scoped>
.active{
  color: #FFF;
  background-color: #409EFF;
  border-color: #409EFF;
}
.total_view{
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.total_view .opt_total{
    width: 24%;
    background: #fff;
    box-sizing: border-box;
    border-radius: 4px;
}
.opt_total .title {
  font-size: 16px;
  display: flex;
  justify-content: space-between;
  padding: 12px;
}
.opt_total .title span{
  color: #333;
  font-size: 16px;
}
.opt_total .title .visibility{
  visibility: hidden;
}
.opt_total .title i{
  cursor: pointer;
  font-size: 18px;
  color: #D8D8D8;
}
.opt_total .title i:hover{
  color: #3F97FF;
}
.opt_total .value{
  font-size: 36px;
  color: #333;
  line-height: 80px;
  padding: 0 12px;
}
.opt_total .growth{
  border-top: 1px solid #E8E8E8;
  padding: 12px;
  font-size: 14px;
  color: #333;
}
.echarts_view_1{
  padding: 12px;
  background: #fff;
  margin-bottom: 10px;
}
.echarts_view_1 .filter_view{
  position: relative;

}
.echarts_view_1 .f_view{
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
}
.f_view span{
  font-size: 14px;
  color: #656565
}
.echarts_view_1 .buttons{
  margin-left: 20px;
}
.echarts_view_1 .content{
  display:flex;
  justify-content: space-between;
  width: 100%;
}
.echarts_view_1 .content .e_chart_wrap{
  width: 70%;
  height: 400px;
  position: relative;
  padding-top: 30px;
}
.echarts_view_1 .content .e_chart_wrap2{
  width: 30%;
  height: 500px;
  position: relative;
  padding-top: 30px;
}
.echarts_view_1 .content .e_chart{
  width: 100%;
  height: 100%;
}
.echarts_view_1 .content .e_chart_wrap .el-icon-more{
  position: absolute;
  right: 40px;
  top: 35px;
  cursor: pointer;
}
.echarts_view_1 .content .e_chart_wrap .el-icon-more:hover{
  color: #4196FF
}
.echarts_view_1 .content .ranks{
  width: 28%;
  padding-right: 20px;
  max-width: 350px;
}
.ranks .rank_t{
  display: flex;
  font-size: 14px;
  color: #333;
  justify-content: space-between;
  padding: 12px 0;
}
.rank_face img{
  margin-right: 10px;
  cursor: pointer;
}
.rank_face i {
  cursor: pointer;
}
.rank_face i:hover{
  color: #4196FF
}
.rank_list{
  width: 100%;
}
.rank_item{
  display: flex;
  width: 100%;
  justify-content: space-between;
  align-items: center;
  height: 36px;
}
.rank_item .name{
  width: 38%;
  display: flex;
  justify-content: space-between;
}
.rank_item .number{
  width: 20px;
  height: 20px;
  border-radius: 50%;
  font-size: 14px;
  color: #333;
  background: #fff;
  text-align: center;
  line-height: 20px;
}
.rank_item .radius_num{
  background: #FB3F3F;
  color: #fff;
}
.rank_item span{
  font-size: 16px;
  color: #333;
}
.rank_item .price{
  color: #4196FF;
  font-size: 16px;
}
.echarts_view_2{
  display: flex;
  justify-content: space-between;
}
.echarts_view_2 .echarts_wrap{
  width: 49%;
  background: #fff;
  border-radius: 3px;
}
.echarts_wrap .echarts_head{
  padding: 20px;
  border-bottom: 1px solid #E8E8E8;
}
.echarts_head p{
  height: 30px
}
.tabs_view{
  line-height: 32px;
  padding-bottom: 10px;
  border-bottom: 1px solid #F6F6F6;
}
.el_table{
  padding-top: 60px;
  width: 60%;
}
</style>
